<template>
  <div class="special">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="专题" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <van-tabs v-model="specialActive" swipeable title-active-color="#1989fa" color="#1989fa" animated :border="true" @click="tabOnClick">
      <van-tab v-for="specialClassification in specialClassifications" :key="specialClassification.id" :title="specialClassification.title"></van-tab>
    </van-tabs>
    <div class="articleCell">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="listLoading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
          <ArticleComponent :articles="articles"></ArticleComponent>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import ArticleComponent from '@/components/ArticleComponent.vue'
import requestApi from '@/utils/request.js'
import { Toast } from 'vant'

export default {
  name: 'special',
  components: { ArticleComponent },
  data() {
    return {
      specialActive: 0,
      specialClassifications: [],
      refreshing: false,
      listLoading: false,
      finished: false,
      articlesPage: 1,
      articleType: '',
      articles: [
        {
          id: 1,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 2,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 3,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 4,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        }
      ]
    }
  },
  methods: {
    returnPage() {
      this.$router.back()
    },
    // list触底事件
    onLoad() {
      this.getArticles(this, this.articleType)
    },
    // 先下啦刷新事件
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.listLoading = true
      this.onLoad()
    },
    tabOnClick(name, title) {
      this.articles = []
      this.refreshing = false
      this.articlesPage = 1
      this.articleType = title
      this.finished = false
      this.getArticles(this, this.articleType)
    },
    // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    getSpecialClassification() {
      const then = this
      requestApi
        .get('getSpecialClassification')
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.specialClassifications = req.data
            if (then.specialClassifications != null && then.specialClassifications.length > 0) {
              then.articleType = then.specialClassifications[0].title
              then.getArticles(then, then.articleType)
            }
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载文章类型错误')
        })
    },
    getArticles(then, articleType) {
      // 触发下拉刷新事件 刷新数据
      if (then.refreshing) {
        then.articles = []
        then.refreshing = false
        then.articlesPage = 1
      }
      requestApi
        .get('getArticlesByType', {
          params: {
            pageNumber: then.articlesPage,
            pageSize: 10,
            type: articleType
          }
        })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            // 第一次加载直接赋值
            if (req.data.isFirstPage) {
              then.articles = req.data.list
            } else {
              // 非第一次加载 合并处理数据
              then.articles = then.articles.concat(req.data.list)
            }
            then.articlesPage = req.data.nextPage
            // 加载状态结束
            then.listLoading = false
            // 是否是最后一页
            if (req.data.isLastPage) {
              then.finished = true
            }
          } else {
            then.listLoading = false
            then.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载文章错误')
        })
    }
  },
  created() {
    this.getSpecialClassification()
  }
}
</script>

<style lang="less" scoped></style>
